$(function() {
	Clip.init({
		height: 400,
		width: 400,
		targetWidth: 200,
		targetHeight: 250
	});
})

function getPosition() {
	console.log(Clip.getClipInfo());
}

var Clip = {
	position: {},
	scaling: 1,
	paras: {},
	init: function(paras) {
		//先初始化框框大小
		this.paras = paras;
		var imgInitWidth = $('.cliper-img').width();
		var imgInitHeight = $('.cliper-img').height();
		Clip.scaling = (paras.targetWidth + 20) / imgInitWidth;
		if (Clip.scaling * imgInitHeight < paras.height) {
			Clip.scaling = (paras.targetHeight + 20) / imgInitHeight;
		}
		$('.cliper-container').width(paras.width ? paras.width : 200);
		$('.cliper-container').height(paras.height ? paras.height : 200);
		$('.cliper').width(paras.width);
		$('.cliper').height(paras.height);
		$('.cliper-chooser').height(paras.targetHeight);
		$('.cliper-chooser').width(paras.targetWidth);
		$(".slider").width(paras.width - 20).css('margin', '0 10px 0 10px').slider({
			value: Clip.scaling * 100,
			orientation: "horizontal",
			range: "min",
			animate: true,
			max: Clip.scaling > 2 ? Clip.scaling * 100 : 200,
			min: Clip.scaling * 100,
			change: function(e, u) {
				var curImgWidth = u.value / 100 * imgInitWidth;
				Clip.scaling = u.value / 100;
				$('.cliper-img').width(curImgWidth);
			}
		}).find('*').css('border-radius', 0);


		//先让图片来到我想要的呢个框框头
		var cliperHeight = $('.cliper').height();
		var cliperWidth = $('.cliper').width();
		$('.cliper-img').width(Clip.scaling * imgInitWidth);
		$('.cliper-img').css('top', 0 - cliperHeight);
		Clip.checkPosition();
		Clip.position = {
			left:  $('.cliper-top-left').width()- $('.cliper-img')[0].offsetLeft ,
    		top:   $('.cliper-top-left').height()-$('.cliper-img')[0].offsetTop
		}
		Drag.init($('.cliper-container')[0], $('.cliper-img')[0]);
		$('.cliper-img')[0].onDrag = function(left, top) {
			Clip.checkPosition({
				left: left,
				top: top
			});
		}
	},
	checkPosition: function(position) {
		if ($('.cliper-img')[0].offsetLeft > $('.cliper-top-left').width()) {
			$('.cliper-img').css('left', $('.cliper-top-left').width())
		}
		if ($('.cliper-img')[0].offsetTop > $('.cliper-top-left').height()) {
			$('.cliper-img').css('top', $('.cliper-top-left').height() - Clip.paras.height)
		}
		if ($('.cliper-top-left').width() + Clip.paras.targetWidth - $('.cliper-img')[0].offsetLeft > $('.cliper-img').width() - 10) {
			$('.cliper-img').css('left', $('.cliper-top-left').width() + Clip.paras.targetWidth - $('.cliper-img').width() + 10)
		}
		if ($('.cliper-img')[0].offsetTop + $('.cliper-img').height() < $('.cliper-top-left').height() + Clip.paras.targetHeight + 10) {
			$('.cliper-img').css('top', $('.cliper-top-left').height() + Clip.paras.targetHeight - $('.cliper-img').height() - Clip.paras.height + 10)
		}
		Clip.position = {
			left:  $('.cliper-top-left').width()- $('.cliper-img')[0].offsetLeft ,
    		top:   $('.cliper-top-left').height()-$('.cliper-img')[0].offsetTop
		};
	},
	getPosition: function() {
		return this.position;
	},
	getscaling: function() {
		return this.scaling;
	},
	getClipInfo: function() {
		return {
			position: this.getPosition(),
			scaling: this.getscaling(),
			width: this.paras.targetWidth,
			height: this.paras.targetHeight
		}
	}
}